/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

//
// Component: Button
//
// ========================================================================


// Variables
// ========================================================================

@button-height:									@global-height;
@button-mini-height:							@global-mini-height;
@button-small-height:							@global-small-height;
@button-large-height:							@global-large-height;
@button-line-height:							@global-height;

@button-mini-line-height:						@global-mini-height;
@button-small-line-height:						@global-small-height;
@button-large-line-height:						@global-large-height;

@button-mini-font-size:							round(@global-font-size * 0.78);
@button-small-font-size:						round(@global-font-size * 0.85);
@button-large-font-size:						round(@global-font-size * 1.14);

@button-background:								@global-default-background;
@button-color:									@global-color;
@button-hover-background:						@global-default-hover-background;
@button-hover-color:							@global-color;
@button-active-background:						@global-default-active-background;
@button-active-color:							@global-color;

@button-primary-background:						@global-primary-background;
@button-primary-color:							@global-contrast-color;
@button-primary-hover-background:				desaturate(lighten(@global-primary-background, 5%), 6%);
@button-primary-hover-color:					@global-contrast-color;
@button-primary-active-background:				desaturate(darken(@global-primary-background, 5%), 6%);
@button-primary-active-color:					@global-contrast-color;

@button-success-background:						@global-success-background;
@button-success-color:							@global-contrast-color;
@button-success-hover-background:				desaturate(lighten(@global-success-background, 5%), 6%);
@button-success-hover-color:					@global-contrast-color;
@button-success-active-background:				desaturate(darken(@global-success-background, 5%), 6%);
@button-success-active-color:					@global-contrast-color;

@button-danger-background:						@global-danger-background;
@button-danger-color:							@global-contrast-color;
@button-danger-hover-background:				desaturate(lighten(@global-danger-background, 5%), 6%);
@button-danger-hover-color:						@global-contrast-color;
@button-danger-active-background:				desaturate(darken(@global-danger-background, 5%), 6%);
@button-danger-active-color:					@global-contrast-color;

@button-disabled-background:					@global-light-background;
@button-disabled-color:							@global-muted-color;

@button-link-color:								@global-link-color;
@button-link-hover-color:						@global-link-hover-color;
@button-link-disabled-color:					@global-muted-color;

//
// New
//

@button-box-shadow:								rgba(0,0,0,0.09);
@button-hover-box-shadow:						rgba(0,0,0,0.16);
@button-active-box-shadow: 						rgba(0,0,0,0.1);

@button-gradient-top:							@global-default-gradient-top;
@button-gradient-bottom:						@global-default-gradient-bottom;

@button-primary-gradient-top:					@global-primary-gradient-top;
@button-primary-gradient-bottom:				@global-primary-gradient-bottom;

@button-success-gradient-top:					@global-success-gradient-top;
@button-success-gradient-bottom:				@global-success-gradient-bottom;

@button-warning-gradient-top:					@global-warning-gradient-top;
@button-warning-gradient-bottom:				@global-warning-gradient-bottom;

@button-danger-gradient-top:					@global-danger-gradient-top;
@button-danger-gradient-bottom:					@global-danger-gradient-bottom;

@button-font-size:								round(@global-font-size * 0.93); // 13px
@button-font-weight: 							@global-font-weight;
@button-text-transform:							uppercase;


// Component
// ========================================================================

.hook-button() {
	border: 1px solid @global-border;
	border-radius: @global-border-radius;
	background-origin: border-box;
	background: mix(@button-gradient-top, @button-gradient-bottom, 50%);
	background-image: -webkit-linear-gradient(top, @button-gradient-top, @button-gradient-bottom);
	background-image: linear-gradient(to bottom, @button-gradient-top, @button-gradient-bottom);
	font-size: @button-font-size;
	font-weight: @button-font-weight;
	text-transform: @button-text-transform;
}

.hook-button-hover() {
	border-color: @global-hover-border;
	background-image: none;
}

.hook-button-active() {
	background-image: none;
	box-shadow: inset 0 2px 4px @button-active-box-shadow;
}


// Color modifiers
// ========================================================================

//
// Modifier: `uk-button-primary`
//

.hook-button-primary() {
	background-image: -webkit-linear-gradient(top, @button-primary-gradient-top, @button-primary-gradient-bottom);
	background-image: linear-gradient(to bottom, @button-primary-gradient-top, @button-primary-gradient-bottom);
}

.hook-button-primary-hover() { background-image: none; }
.hook-button-primary-active() {
	background-image: none;
	box-shadow: inset 0 2px 4px @button-active-box-shadow;
}

//
// Modifier: `uk-button-success`
//

.hook-button-success() {
	background-image: -webkit-linear-gradient(top, @button-success-gradient-top, @button-success-gradient-bottom);
	background-image: linear-gradient(to bottom, @button-success-gradient-top, @button-success-gradient-bottom);
	line-height: @button-line-height - 2;
}

.hook-button-success-hover() { background-image: none; }
.hook-button-success-active() {
	background-image: none;
	box-shadow: inset 0 2px 4px @button-active-box-shadow;
}

//
// Modifier: `uk-button-danger`
//

.hook-button-danger() {
	background-image: -webkit-linear-gradient(top, @button-danger-gradient-top, @button-danger-gradient-bottom);
	background-image: linear-gradient(to bottom, @button-danger-gradient-top, @button-danger-gradient-bottom);
	line-height: @button-line-height - 2;
}

.hook-button-danger-hover() { background-image: none; }
.hook-button-danger-active() {
	background-image: none;
	box-shadow: inset 0 2px 4px @button-active-box-shadow;
}


// Disabled state
// ========================================================================

.hook-button-disable() {
	background-image: none;
	box-shadow: none;
}


// Modifier: `uk-button-link`
// ========================================================================

.hook-button-link() { box-shadow: none; }


// Size modifiers
// ========================================================================

.hook-button-large() { border-radius: @global-border-radius + 1; }


// Miscellaneous
// ========================================================================


.hook-button-misc() {

	/* Sub-object `uk-button-group`
	 ========================================================================== */

	/*
	 * Reset border-radius
	 */

	.uk-button-group > .uk-button:not(:first-child):not(:last-child),
	.uk-button-group > div:not(:first-child):not(:last-child) .uk-button { border-radius: 0; }

	.uk-button-group > .uk-button:first-child,
	.uk-button-group > div:first-child .uk-button {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.uk-button-group > .uk-button:last-child,
	.uk-button-group > div:last-child .uk-button {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	/*
	 * Collapse border
	 */

	.uk-button-group > .uk-button:nth-child(n+2),
	.uk-button-group > div:nth-child(n+2) .uk-button { margin-left: -1px; }

	/*
	 * Create position context to superimpose the successor elements border
	 * Known issue: If you use an `a` element as button and an icon inside,
	 * the active state will not work if you click the icon inside the button
	 * Workaround: Just use a `button` or `input` element as button
	 */

	.uk-button-group .uk-button:active { position: relative; }

}